.checkbox {
    outline: none;
    display: inline-flex;
    align-items: center;
    & + .checkbox {
        margin-left: 0.5em;
    }
    input[type=checkbox] {
        display: none;
        + .check {
            position: relative;
            width: 1.25em;
            height: 1.25em;
            border-radius: $radius;
            border: 2px solid $grey;
            background: none;
            transition: all $speed-slower $easing;
        }
        &:checked + .check {
            background: $primary url(checkmark($white)) no-repeat center center;
            border-color: $primary;
        }
    }
    .control-label {
        padding-left: 0.5em;
    }
    &[disabled] {
        opacity: 0.5;
    }
    &:hover {
        input[type=checkbox] + .check {
            border-color: $primary;
        }
    }
    &:focus {
        input[type=checkbox] + .check {
            box-shadow: 0 0 0.5em rgba($grey, 0.8);
        }
        input[type=checkbox]:checked + .check {
            box-shadow: 0 0 0.5em rgba($primary, 0.8);
        }
    }
}
